<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>结算</title>
	<!-- 引入样式
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.min.css">
    -->
	<!-- 引入组件库
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.min.js"></script>
    -->
	<link rel="stylesheet" href="layui/css/layui.css"/>
	<link rel="stylesheet" href="css/shopping.css"/>
	<link rel="stylesheet" href="css/buy.css"/>
	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="layer/layer.js"></script>
	<script type="text/javascript" src="layui/layui.js"></script>
	<script src="js/checkauth.js"></script>


</head>
<body>
<div id="bg"></div>
<div id="addAdrInp">
	<h2>添加收件人</h2>
	<p>收件人：<input type="text" id="name"/></p>
	<p>电话：<input type="text" id="phone"/></p>
	<p>地址：<input type="text" id="adr"/></p>
	<p>
		<button id="buy-subBtn">添加</button>
	</p>
</div>

<!-- 引入头部 -->
<div>
	<iframe src="header.html" scrolling="no" style="height:180px;width: 100%;border: 0px;"></iframe>
</div>
<!--引入头部end-->

<hr style="height: 10px; background-color: #FF4400;"/>

<!--收货地址部分-->
<div class="layui-container">
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
		<legend>收货地址</legend>
	</fieldset>
	<div class="layui-row">
		<div class="layui-col-md12">
			<!-- 添加收货地址按钮 -->
			<button id="addAddress" class="layui-btn layui-btn-normal">
				<i class="layui-icon layui-icon-add-1"></i>
				新增收货地址
			</button>
			<br/>
			<!-- 显式收货地址 -->
			<div id="addressList">

			</div>

		</div>
	</div>

</div>
<!--收货地址end-->

<!--商品清单-->
<div class="layui-container" style="top:-30px;">
	<div class="layui-row">
		<div class="layui-col-md12">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
				<legend>商品清单</legend>
			</fieldset>

			<table class="layui-table my-shopping-table" lay-skin="line">
				<colgroup>
					<col width="160">
					<col width="">
					<col width="100">
					<col width="100">
					<col width="100">
				</colgroup>
				<thead>
				<tr>
					<th style="font-weight: bold;">
						图片
					</th>
					<th style="font-weight: bold;">
						商品信息
					</th>
					<th style="text-align: center;font-weight: bold;">
						单价
					</th>
					<th style="text-align: center;font-weight: bold;">
						数量
					</th>
					<th style="text-align: center;font-weight: bold;">
						合计
					</th>

				</tr>
				</thead>
				<tbody id="goodsList">


				</tbody>
			</table>
		</div>
	</div>
</div>
<!--商品清单end-->

<!--付款部分-->
<div class="layui-container" style="top: -20px;">
	<div class="layui-row  my-shopping-buy">
		<div class="layui-col-md12">
			<div class="my-buyCheck">
			</div>
			<div class="my-buyBtn">
				总价：
				<font style="font-size: 20px;font-weight: bold;color:#FF4400;">￥<span id="totalPrice">9999</span></font>
				<button id="buyBtn" onclick="goToPay()">去付款</button>
			</div>
		</div>

	</div>
</div>
<!--付款部分end-->
<!--引入底部-->
<div class="my-footer">
	<iframe src="footer.html" scrolling="no" style="border: 0px;width: 100%;height: 291px;"></iframe>
</div>
<!--引入底部end-->
</body>
<script>

	layui.use(['layer'], function(){
		var layer = layui.layer;
	});

	//let currentAddressIndex = 0;
	let cart = {

	};
	let addressList = [];
	let currentAddress = {}; //当前的收货地址

	$(function () {
		//地址栏鼠标悬停事件，显示编辑和删除按钮
		$(".my-showAddress").mouseenter(function () {
			$(this).children(".my-address-edit").show();
		});
		$(".my-showAddress").mouseleave(function () {
			$(this).children(".my-address-edit").hide();
		});

		//点击添加新地址事件
		$('#addAddress').on('click', function () {
			layer.open({
				type: 2,
				area: ['700px', '450px'],
				fixed: true, //不固定
				maxmin: false,
				title: '新增收货地址',
				anim: 1,
				/*scrollbar:false,*///禁止滚动
				shadeClose: true,
				content: 'shouhuo.html'
			});
		});
	});

	if (!isLogin()) {
		window.location.href = 'login.html';
	}

	if (window.localStorage.getItem("cart.servletdemo.com_users" + currentLoginUserId) != null) {
		//把购物打印输出。
		cart = JSON.parse(window.localStorage.getItem("cart.servletdemo.com_users" + currentLoginUserId));
		//console.log("-----您的购物车对象是-------");
		//console.log(cart);
		$("#goodsList").empty();
		let html = "";
		for (let i = 0; i < cart.goodsList.length; i++) {
			html += '<tr>\n' +
					'\t\t\t\t\t\t\t\t<td>\n' +
					'\t\t\t\t\t\t\t\t\t<a href="">\n' +
					'\t\t\t\t\t\t\t\t\t\t<img src="' + cart.goodsList[i].pic + '" width="80px" />\n' +
					'\t\t\t\t\t\t\t\t\t</a>\n' +
					'\t\t\t\t\t\t\t\t</td>\n' +
					'\t\t\t\t\t\t\t\t<td>\n' +
					'\t\t\t\t\t\t\t\t\t<a href="">\n' +
					'\t\t\t\t\t\t\t\t\t\t' + cart.goodsList[i].name + '\n' +
					'\t\t\t\t\t\t\t\t\t</a>\n' +
					'\t\t\t\t\t\t\t\t</td>\n' +
					'\t\t\t\t\t\t\t\t<td align="center">\n' +
					'\t\t\t\t\t\t\t\t\t<span>￥' + cart.goodsList[i].price + '</span>\n' +
					'\t\t\t\t\t\t\t\t</td>\n' +
					'\t\t\t\t\t\t\t\t<td align="center">\n' +
					'\t\t\t\t\t\t\t\t\t×' + cart.goodsList[i].buyNum + '件\n' +
					'\t\t\t\t\t\t\t\t</td>\n' +
					'\t\t\t\t\t\t\t\t<td align="center">\n' +
					'\t\t\t\t\t\t\t\t\t<span>￥' + cart.goodsList[i].price * cart.goodsList[i].buyNum + '</span>\n' +
					'\t\t\t\t\t\t\t\t</td>\n' +
					'\n' +
					'\t\t\t\t\t\t\t</tr>'
		}

		$("#goodsList").append(html);

		$("#totalPrice").text(cart.totalPrice);

		//发送一个ajax异步请求，获得当前用户的收货地址集合
		$.ajax({
			url: "https://localhost:8443/servletdemo/address/list?uid=" + currentLoginUserId,
			type: "GET",
			dataType: "text",
			success: function (resp) {
				let result = JSON.parse(resp);
				if (result.code === 200) {
					console.log('获取商品分类信息成功！');
					console.log(result.data);
					addressList = result.data;

					$("#addressList").empty();
					let html = "";
					for (let i = 0; i < addressList.length; i++) {
						if (i == 0) {
							html += '\t<div  title="' + i + '" class="my-showAddress sel" >\n';
							currentAddress = addressList[i];
						} else {
							html += '\t<div title="' + i + '" class="my-showAddress" >\n';
						}
						html += '\t\t\t\t\t\t\t<p style="border-bottom:1px solid gainsboro;">\n' +
								'\t\t\t\t\t\t\t\t' + addressList[i].realname + '（收）&nbsp;&nbsp;' + addressList[i].mobile + '\n' +
								'\t\t\t\t\t\t\t</p>\n' +
								'\t\t\t\t\t\t\t<p>\n' +
								'\t\t\t\t\t\t\t\t' + addressList[i].province + '&nbsp;' + addressList[i].city + '&nbsp;' + addressList[i].zone + '\n' +
								'\t\t\t\t\t\t\t</p>\n' +
								'\t\t\t\t\t\t\t<p>\n' +
								'\t\t\t\t\t\t\t\t' + addressList[i].street + '\n' +
								'\t\t\t\t\t\t\t</p>\n' +
								'\t\t\t\t\t\t\t<p class="my-address-edit">\n' +
								'\t\t\t\t\t\t\t\t<a href="">编辑</a>\n' +
								'\t\t\t\t\t\t\t\t<a href="">删除</a>\n' +
								'\t\t\t\t\t\t\t</p>\n' +
								'\t\t\t\t\t\t</div>\n' +
								'\t\t\t\t\t';
					}

					$("#addressList").append(html);
				}

				$(".my-showAddress").click(function () {
					let index = $(this).prop("title");
					currentAddress = addressList[index];
					console.log('change address now....,index is:' + index);
					$(this).addClass("sel");
					$(this).siblings().removeClass("sel");
				});
			}
		});

	}

	function goToPay(){
		console.log("当前的购物车是");
		cart.uid = currentLoginUserId;
		cart.address = currentAddress

		console.log(cart);

		$.ajax({
			url: 'https://localhost:8443/servletdemo/order',
			type: 'POST',
			data: JSON.stringify(cart),
			dataType: 'text',
			success:function(resp){
				let result = JSON.parse(resp);
				if(result.code === 200){
					//layer.msg(result.msg);
					let oid = result.data;
					console.log("返回的订单编号是："+oid);
					//生成支付的二维码
					$.ajax({
						url: "https://localhost:8443/servletdemo/order/qrcode?oid="+oid,
						type: "GET",
						dataType: "text",
						success: function (resp) {
							let result = JSON.parse(resp);
							if(result.code===200) {

								let qrCodeImgUrl =  result.data;

								//弹出模态窗口
								layer.open({
									type: 1
									,offset: 't' //水平和垂直方向居中
									,id: '' //防止重复弹出
									,title: '支付窗口'
									,content: '<div style="padding: 0px 0px;"><img src="'+qrCodeImgUrl+'"></div>'
									,btn: '关闭全部'
									,btnAlign: 'c' //按钮居中
									,shade: 0 //不显示遮罩
									,yes: function(){
										layer.closeAll();

										setTimeout("javascript:window.location.href='payResult.html'",2000)
									}
								});
							}
						}
					});




				}
			}
		})

	}

</script>
</html>
